<template>
	<view v-if="!defectiveVideoSrc.length && teachingVideoSrc ==null" class="videoNull">
		暂无任何视频
	</view>
	<view v-else>
		<view class="u-config-title u-border-bottom">
			教学视频
		</view>
		<view class="wrapStyle u-flex u-flex-wrap u-row-around u-col-center">
			<video
				id="index" 
				:autoplay="playSwitch"
				muted 
				:src="teachingVideoSrc" 
				style="width:600px; height: 400px;">
			</video>
		</view>
		<!-- <u-gap height="20" bg-color="#bbb"></u-gap> -->
		<view class="u-config-title u-border-bottom">
			质量问题视频
		</view>
		<view v-for="(item,index) in defectiveVideoSrc" class="wrapStyle u-flex u-flex-wrap u-row-around u-col-center">
			<video
				id="index" 
				:autoplay="playSwitch"
				muted 
				:src="item.videoUrl" 
				style="width:600px; height: 400px;">
			</video>
		</view>
		<!-- <text class="countDown" @click="evalJs" v-if="!watchTag">
			观看倒计时{{timeCount}}秒
		</text> -->
	</view>
</template>

<script>
	import { getPdfAndVideo, setUserDVideoFile } from '../utils/index.js'
	export default {
		data() {
			return {
				teachingVideoSrc: null,						//教学视频URL地址，教学视频只有一条
				defectiveVideoSrc: [],						//质量视频URL地址
				playSwitch: false,							//是否自动播放
				timer: '',
				watchTag: 1,
				timeCount: 60
			}
		},
		methods: {
			// 获取视频URL地址函数
			async getVideo(value) {
				const {data} =await getPdfAndVideo({sopBarcode:value})
				const errMsg = data.msg
				if(data.code == '69') {
					alert(errMsg)
				} else {
					if (data == null) return
					this.defectiveVideoSrc = data.data[0].disqualificationList
					this.teachingVideoSrc = data.data[0].videoUrl
					let that = this
					if(!Number(sessionStorage.getItem('watchTag'))){
						clearInterval(this.timer)
						this.timer = setInterval(function(){
							that.timeCount--
							uni.setNavigationBarTitle({
								title: '操作指导视频' + '（观看倒计时：' + that.timeCount +'）'
							});
							if(that.timeCount<0){
								that.watchTag = 1
								uni.setNavigationBarTitle({
									title: '操作指导视频'
								});
							}
							console.log(that.timer)
						},1000)
					}
				}
			},
			// 向后台发送是否已经阅读完成的消息
			async postWatchTag() {
				const query = {
					sopBarcode:sessionStorage.getItem('routeInfo'),
					deviceBardcode: sessionStorage.getItem('deviceBarcode')
				}
				const { data } = await setUserDVideoFile(query)
			},
		},
		//进入页面根据sopBarcode获取视频的URL地址
		//!Number(undefined)=true,!Number(0)=true,!Number(1)=false
		//第一次进入页面和进入页面查看watchTag=0时，均重新设置watchTag，前面看过的时长不计，清零！
		//若进入页面watchTag=1时，则调用已经观看了的接口函数postWatchTag()
		onShow() {
			const sopBarcode = sessionStorage.getItem('routeInfo')
			this.getVideo(sopBarcode)
			if(!Number(sessionStorage.getItem('watchTag'))) {
				sessionStorage.setItem("watchTag", 0)
				this.watchTag = 0
				this.timeCount = 60
				sessionStorage.setItem("videoStartTime", Math.round(new Date().getTime()/1000))
			} else {
				this.postWatchTag()
			}
			uni.setNavigationBarTitle({
				title: '操作指导视频'
			});
		},
		//离开视频观看页面，在sessionStorage存储离开时间
		//计算离开时间videoStopTime与进入视频页面时间videoStartTime的差值为用户页面停留时间duration
		//当满足时长要求，则对watchTag标志位置1,否则给予用户提示
		onHide() {
			sessionStorage.setItem("videoStopTime", Math.round(new Date().getTime()/1000))
			if(Number(sessionStorage.getItem('watchTag'))) return
			const duration = sessionStorage.getItem('videoStopTime') - sessionStorage.getItem('videoStartTime')
			if(this.defectiveVideoSrc.length || this.teachingVideoSrc !=null){
				// 停留60秒
				if(duration >= 60) {
					sessionStorage.setItem("watchTag", 1)
					this.postWatchTag()
				} else {
					alert('请观看视频！')
				}
				clearInterval(this.timer)
			} else {
				// 停留60秒
				if(duration >= 1) {
					sessionStorage.setItem("watchTag", 1)
					this.postWatchTag()
				} else {
					alert('请观看视频！')
					return
				}
			}
		},
	}
</script>

<style lang="scss">
.videoNull{
	font-size: 18px;
	margin-top: 100px;
	text-align: center;
}
.wrapStyle {
	margin: 10px;
	padding: 10px;
	width: 500px;
	display:inline;
}
// 标题的样式
.u-config-title {
	text-align: center;
	font-size: 25px;
	font-weight: bold;
	margin-bottom: 20px;
}
.countDown{
		position: fixed;
		bottom: 160rpx;
		right: 50rpx;
		width: 150rpx;
		height: 80rpx;
		font-size: 20rpx;
		text-align: center;
		border: 1rpx solid #909399;
		padding: 10rpx;
		border-radius: 10rpx;
	}
</style>
